<template>
  <div>
    <div
      ref="lineChart"
      style="width:100%;height:100%;"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      option: {
        title: {
          text: "Temperature",
          textStyle: {
            color: "#fff"
          }
        },
        tooltip: {
          trigger: "axis"
        },
        // 图例
        legend: {
          // 文字颜色
          textStyle: {
            color: "#9FE6B8",
            fontSize: 14
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: true, //起点是否在0点
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          axisLine: {
            lineStyle: {
              color: "#37A2DA"
            }
          },
          //去除网格线
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value} °C"
          },
          axisLine: {
            lineStyle: {
              color: "#FFDB5C"
            }
          },
          //去除网格线
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: "suitable",
            type: "bar",
            data: [15, 12, 13, 12, 16, 14, 10],
            color: "rgb(13, 143, 207)",
            barWidth: "30%"
          },
          {
            name: "Highest",
            type: "line",
            data: [10, 11, 13, 11, 12, 12, 9],
            color: "rgb(0,176,80)"
          },
          {
            name: "Lowest",
            type: "line",
            data: [1, -2, 2, 5, 3, 2, 0],
            markPoint: {
              data: [{ name: "周最低", value: -2, xAxis: 1, yAxis: -1.5 }]
            }
          }
        ]
      }
    };
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.chart();
    });
  },
  methods: {
    chart() {
      var myCharts = this.$echarts.init(this.$refs.lineChart);
      myCharts.setOption(this.option);
      window.onresize = myCharts.resize;
    }
  }
};
</script>

<style scoped>
.aa {
  color: rgb(13, 143, 207);
}
</style>